<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 既要传数据,又要修改数据,可以用v-model来简化 -->
        <follow-user v-model="isFollowed"></follow-user>
        <!-- 等效于 -->
        <!-- <follow-user :value="isFollowed" @input="isFollowed = $event"></follow-user> -->
        <!-- <follow-user :is-followed="isFollowed" @update="isFollowed = $event"></follow-user> -->
    </div>
</body>
<script>
//适配v-model-方式1-子组件修改代码,让子组件适应v-model    
/*
Vue.component('follow-user',{
    props: ['value'],
    template: `
        <div>
            <button v-if="value" @click="$emit('input', false)">已关注</button>    
            <button v-else  @click="$emit('input', true)">关注</button>
        </div>
    `
})
*/
// 适配v-model-方式2-子组件添加配置,修改v-model默认规则  
/**/    
Vue.component('follow-user',{
    model: {
        // prop: 'value',
        // event: 'input'
        prop: 'isFollowed',
        event: 'update'
    },
    props: ['isFollowed'],
    template: `
        <div>
            <button v-if="isFollowed" @click="$emit('update', false)">已关注</button>    
            <button v-else  @click="$emit('update', true)">关注</button>
        </div>
    `
})

let vm = new Vue({
    el: '#app',
    data(){
        return {
            isFollowed: false
        }
    }
})
</script>
</html>